/*
 * @Date: 2022-01-28 08:27:42
 * @LastEditTime: 2022-01-28 08:49:40
 */
import Vue from 'vue'
import Router from 'vue-router'
import router from '@/router'
import store from '@/store'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css' // 引入进度条样式

Vue.use(Router)
// 权限拦截 导航守卫

// 定义白名单 白名单直接访问 无需token
const whiteList = ['/login', '/404']
// 路由前置守卫

/*
  to:到哪里去
  from: 从哪里来
  next:
    next() 通过放行
    next("/") 到指定位置
    next(false) 到此终止
*/
router.beforeEach(async(to, from, next) => {
  nprogress.start() // 开启进度条
  // 通过store.getters的快捷访问 判断有无token
  if (store.getters.token) {
    // 如果有token  是否前往主页
    if (to.path === '/login') {
      // 跳到主页
      next('/')
    } else {
      // 为什么在 放过的地方  获取用户资料
      // 每次都要获取用户资料？ 肯定是有资料了就不用获取了
      if (!store.getters.userId) {
        const { roles } = await store.dispatch('user/getUserInfo')
        // 为什么代码写这里？ => 因为这里获取用户的资料 里面有roles.menus标识
        // 这里必须await 后续需要资料获取执行操作
        // menus 标识 => actions 调用方法 =》 比较menus 和 动态路由的menu =》 有相同的 才能有访问的权限
        const routes = await store.dispatch('permission/filterRouter', roles.menus)

        // 动态路由表
        router.addRoutes([...routes, { path: '*', redirect: '/404', hidden: true }]) // addRoutes 是 vue-router的固定方法 动态添加路由规则

        next(to.path)
        // addRoutes后面必须是next(to.path) vue-router的已知缺陷
        // 进门 => 路没铺好 => next(to.path) => 出去再进来一次 =>  addRoutes() 铺好了路 => 再次进来不会掉坑里
      } else {
        // 如果不是前往主页 就通过放行 不拦截
        next()
      }
    }
  } else {
    // 如果无token 判断是否在白名单
    if (whiteList.indexOf(to.path) > -1) {
      // 在白名单 通过放行
      next()
    } else {
      // 不在白名单 跳到登录页
      next('/login')
    }
  }
  nprogress.done()
})
// 路由后置守卫
router.afterEach(() => {
  nprogress.done()
})

